<template>
  <section class="bw-design-right">
    <div class="handred">{{ curNodeName }}</div>

    <div class="content">
      <template v-if="curNodeInfo">
        <a-tabs v-bind="tabsOptions" v-model:activeKey="activeKey">
          <a-tab-pane key="info" tab="节点信息">
            <BwNodeInfo />
          </a-tab-pane>

          <a-tab-pane key="attr" tab="节点属性">
            <BwNodeAttr />
          </a-tab-pane>

          <a-tab-pane key="css" tab="节点样式">
            <BwNodeCss />
          </a-tab-pane>

          <a-tab-pane key="event" tab="节点事件">
            <BwNodeEvent />
          </a-tab-pane>

          <a-tab-pane key="senior" tab="高级配置">
            <BwSeniorSetup />
          </a-tab-pane>
        </a-tabs>
      </template>

      <template v-else>
        <a-empty description="请选择需要操作的节点元素" />
      </template>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useComDesignStoreWithOut } from '@/store'

import BwNodeCss from './coms/nodeCss/index.vue'
import BwNodeInfo from './coms/nodeInfo/index.vue'
import BwNodeAttr from './coms/nodeAttrs/index.vue'
import BwNodeEvent from './coms/nodeEvent/index.vue'
import BwSeniorSetup from './coms/seniorSetup/index.vue'

const designStore = useComDesignStoreWithOut()

const activeKey = ref<string>('attr')
const curNodeInfo = computed(() => {
  const curNodeInfo = designStore.selectNodeEle
  return curNodeInfo
})

const curNodeName = computed(() => {
  let title = '还未选中节点'
  const curNodeInfo = designStore.selectNodeEle
  if (curNodeInfo) {
    title = curNodeInfo.nodeName
  }
  return title
})

const tabsOptions = computed(() => {
  return {
    tabBarStyle: {
      height: '36px',
      padding: '0 8px',
      marginBottom: '8px',
    },
  }
})
</script>

<style lang="less" scoped>
.bw-design-right {
  width: 400px;
  height: 100%;
  overflow: auto;
  flex-shrink: 0;

  .handred {
    width: 100%;
    height: 35px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 35px;
    background: #fff;
    width: calc(100% - 24px);
    border-bottom: 1px solid #e8e8e8;
  }

  .content {
    width: 100%;
    height: calc(100% - 36px);
    overflow: auto;

    :deep(.ant-tabs) {
      height: 100%;

      .ant-tabs-content-holder {
        height: calc(100% - 36px - 8px);
        overflow-y: auto;

        .ant-tabs-content,
        .ant-tabs-tabpane {
          height: 100%;
        }
      }

      .ant-tabs-tab + .ant-tabs-tab {
        margin: 0 0 0 16px;
      }
    }
  }
}
</style>
